<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content"></block>
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox" style="background-color: #fff;"></view>
			<view class="group1">
				<!--此处插入蓝色背景图-->
				<image src="../../static/mybg.png"></image>
			</view>
			<!--  -->
			<view class="group2" @click="navigate('/pages/account/account')">
				<image class="img1" :src="information.avatar" style="border: 2px solid white; border-radius: 50%;">
				</image>
				<view style="width: 250rpx;font-size: 40rpx; margin: 160rpx 0 0 26rpx;overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
				font-family: PingFang SC;font-weight: 800;
				 height: 41rpx;line-height: 39rpx; color: #fff;">{{information.nickname}}</view>

				<!-- 图标 -->
				<view style="width: 41rpx; height: 37rpx;margin: 160rpx 0 0 200rpx;line-height: 37rpx;">
					<image src="../../static/setting.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
			</view>

			<view class="group3">
				<!--此处为会员余额和积分-->
				<view class="p1" @click="navigate('/pages/balance/balance')">
					<view class="parse1">
						<view class="text1">会员余额</view>
						<view class="text2">￥<text>{{information.user_money}}</text></view>
					</view>
					<image style=" height: 70rpx; width: 70rpx; position: absolute; margin: 47rpx 0 0 280rpx;"
						src="../../static/vipicon.png"></image>
				</view>

				<image class="image3" src="../../static/lineshu.png"></image>

				<view class="p2" @click="navigate('/pages/integral/integral')">
					<view class="parse1">
						<view class="text1">积分</view>
						<view class="text2"><text>{{information.user_integral}}</text></view>
					</view>
					<image style=" height: 70rpx; width: 70rpx; position: absolute; margin: 47rpx 0 0 250rpx;" src="../../static/intg.png">
					</image>
				</view>
			</view>

			<view class="group4">
				<view class="parse1" style="display: flex;">
					<view class="text1">积分订单</view>
					<view @click="navigate('/pages/my_order/my_order')" style="width: 130rpx; height: 26rpx; margin: 41rpx 0 0 450rpx;
						color: #BBBBBB; font-size: 24rpx;">
						全部 >
					</view>
				</view>
				<view class="parse2">

					<view class="item" @click="goToOrderPage(2)">
						<image src="../../static/readyfa.png"></image>
						<view class="box">
							<u-badge :value="information.wait_delivery"></u-badge>
						</view>
						<text>待发货</text>
					</view>
					<view class="item" @click="goToOrderPage(3)">
						<image src="../../static/readysou.png"></image>
						<view class="box">
							<u-badge :value="information.wait_take"></u-badge>
						</view>
						<text>待收货</text>
					</view>
					<view class="item" @click="goToOrderPage(5)">
						<image src="../../static/allfresh.png"></image>
						<view class="box">
							<u-badge :value="information.after_sale"></u-badge>
						</view>
						<text>已完成</text>
					</view>
				</view>
			</view>

			<view class="group5">
				<view class="parse1" @click="navigate('/pages/help/help')">
						<image class="img1" src="../../static/myshouchang.png"></image>
						<view class="t1">使用帮助</view>
						<image class="img2" src="../../static/jiantou.png"></image>
				</view>
				<view class="parse2" @click="navigate('/pages/cooperation/cooperation')">
					<image class="img1" src="../../static/feedback.png"></image>
					<view class="t1">合作反馈</view>
					<image class="img2" src="../../static/jiantou.png"></image>
				</view>
				<view class="parse3" @click="navigate('/pages/user_address/user_address')">
					<image class="img1" src="../../static/map.png"></image>
					<view class="t1">收货地址</view>
					<image class="img2" src="../../static/jiantou.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import api from '../../common/apiService';
	import request from '../../common/request';

	const {
		getUserIntegral
	} = api;
	// 东西
	export default {
		data() {
			return {
				information: {
					after_sale: 0,
					avatar: '',
					earnings: '',
					finish: 0,
					id: 0,
					is_new_user: 0,
					mobile: '',
					nickname: '',
					sn: '',
					total_order_amount: '',
					user_integral: '',
					user_money: '',
					wait_delivery: '',
					wait_pay: '',
					wait_take: ''
				}
			};
		},
		mounted() {
			this.loginfo();
		},
		methods: {
			// 跳转
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			loginfo() {
				const uid = uni.getStorageSync('uid');
				getUserIntegral(uid).then(res => {
					this.information = res;
					// console.log("头像",this.information.avatar)
					// this.information.avatar = request.baseUrl+this.information.avatar;
					// console.log(res);
				}).catch(e => {
					console.log(e);
				})

			},
			goToOrderPage(current) {
				uni.navigateTo({
					url: `/pages/my_order/my_order?current=${current}` // 跳转并传递状态
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	view {
		font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
	}

	.group1 {
		image {
			width: 100%;
			height: 485rpx;
			position: fixed;
			z-index: -1;
		}
	}

	.group2 {
		display: flex;

		.img1 {
			width: 120rpx;
			height: 116rpx;
			margin-top: 120rpx;
			margin-left: 54rpx;
		}

		.t1 {
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 157rpx;
			margin-left: 26rpx;
			z-index: 1;
		}

		.img2 {
			width: 41rpx;
			height: 37rpx;
			margin-top: 170rpx;
			margin-left: 344rpx;
		}
	}

	.group3 {
		width: 710rpx;
		height: 170rpx;
		border-radius: 20rpx;
		background-color: #f6f6f6;
		margin-left: 20rpx;
		margin-top: 108rpx;
		z-index: 10;
		display: flex;

		.p1 {
			display: flex;

			.parse1 {
				.text1 {
					font-size: 22rpx;
					padding-top: 46rpx;
					padding-left: 28rpx;

				}

				.text2 {
					font-size: 22rpx;
					color: #ff8400;
					padding-left: 28rpx;
					padding-top: 10rpx;

					text {
						font-size: 48rpx;
						color: #ff8400;
					}
				}
			}

			.img1 {
				position: absolute;
				margin-left: 280rpx;
				width: 70rpx;
				height: 70rpx;
				padding-top: 47rpx;

			}
		}

		.image3 {
			position: absolute;
			margin-left: 370rpx;
			background-color: #bfbfbf;
			width: 1rpx;
			height: 107rpx;
			margin-top: 28rpx;

		}

		.p2 {
			display: flex;
			position: absolute;
			margin-left: 370rpx;

			.parse1 {

				.text1 {
					font-size: 22rpx;
					padding-top: 46rpx;
					padding-left: 28rpx;

				}

				.text2 {
					font-size: 22rpx;
					color: #ff8400;
					padding-left: 28rpx;
					padding-top: 10rpx;

					text {
						font-size: 48rpx;
						color: #ff8400;
					}
				}
			}

			.img1 {
				position: absolute;
				margin-left: 200rpx;
				width: 70rpx;
				height: 70rpx;
				padding-top: 47rpx;

			}
		}

	}

	.group4 {
		width: 710rpx;
		height: 240rpx;
		margin-top: 32rpx;
		margin-left: 20rpx;
		background-color: #f6f6f6;
		border-radius: 20rpx;

		.parse1 {
			display: flex;

			.text1 {
				width: 130rpx;
				height: 40rpx;
				font-size: 28rpx;
				margin: 39rpx 0 0 35rpx;
				// padding-top: 39rpx;
				// padding-left: 35rpx;
				overflow: hidden;
				/* 隐藏超出部分 */
				white-space: nowrap;
				/* 不换行 */
				text-overflow: ellipsis;
				font-weight: bold;
				z-index: 1;
			}

			.text2 {
				padding-top: 41rpx;
				margin-left: 437rpx;
				font-size: 24rpx;
				color: #a3a3a3;
			}

			image {
				width: 9rpx;
				height: 16rpx;
				padding-top: 45rpx;
				padding-left: 19rpx;
			}
		}

		.parse2 {
			display: flex;

			.item {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-left: 80rpx;
				z-index: 1;
				position: relative;

				.box {
					position: absolute;
					top: 40rpx;
					right: 34rpx;



				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-top: 49rpx;

				}

				text {
					padding-top: 10rpx;
					font-size: 24rpx;
				}
			}

		}

	}

	.group5 {
			width: 710rpx;
			height: 338rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			margin: auto;
			margin-top: 16rpx;
			.parse1{
				display: flex;
				
				height: 110rpx;
				.img1{
					width: 40rpx;
					height: 40rpx;
					margin: auto;
					margin-left: 45rpx;
				}
				.t1{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin: auto;
					line-height: 110rpx;
					margin-left: -150rpx;
				}
				.img2{
					width: 9rpx;
					height: 16rpx;
					margin: auto;
					margin-right: 50rpx;
				}
			}
			.parse2{
				display: flex;
				
				height: 110rpx;
				.img1{
					width: 40rpx;
					height: 40rpx;
					margin: auto;
					margin-left: 45rpx;
				}
				.t1{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin: auto;
					line-height: 110rpx;
					margin-left: -150rpx;
				}
				.img2{
					width: 9rpx;
					height: 16rpx;
					margin: auto;
					margin-right: 50rpx;
				}
			}
			.parse3{
				display: flex;
				height: 110rpx;
				
				.img1{
					width: 40rpx;
					height: 40rpx;
					margin: auto;
					margin-left: 45rpx;
				}
				.t1{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin: auto;
					line-height: 110rpx;
					margin-left: -150rpx;
				}
				.img2{
					width: 9rpx;
					height: 16rpx;
					margin: auto;
					margin-right: 50rpx;
				}
			}
	
		}
</style>